iT邦幫忙

DAY 24
1

SVG 與 D3.js系列 第 24

D3.js 也可以像音樂一樣動吃動吃動(1)

  • 分享至 

  • xImage
  •  

完整範例:http://wcc723.github.io/d3js/2014/10/23/Ironman-30-days-24/

學習D3之後會常思考有什麼樣的資料可以圖形化,除了Open data外,還想到一個就是音樂,以前使用Media Player,有許許多多的音樂視覺化的效果,都是透過聲音大小變化,所以如果有聲音大小變化的資訊,似乎就可以達到這樣的效果。

音樂來源:http://unlimited.kptaipei.tw/

範例參考:http://webfinal.herokuapp.com/slides.html

參考

不久前在網路上看到一份D3.js的簡報,寫得真的不錯,文中介紹到一個很沒用的效果(他自己說沒用的..),範例中會播放著音樂,而中間的圓圈會隨著音樂跳動,看著圓圈不斷地跳動,讓我發現很有趣的資訊,就是音樂啊,那不是我正在尋找的資料嗎~

在翻閱他的範例中,可以看到他把音軌轉換成陣列的資訊,會依據音樂的品質轉換...,大概像以下這樣的陣列。

以這個範例來說,是2048長度的陣列,數值為-1 ~ 1,更新速度相當的快,只要有這個值,就可以做出上面範例的跳動圓圈。

資料

技術上已經找到方向,另一個問題就是音樂的來源,由於版權問題,也不太可能隨意使用歌手的音樂。再以柯P的資料做練習時,有稍微看一下創作音樂的部分,創作音樂是使用sound cloud平台,json內在提供sound cloud平台上的資訊。運氣不錯,其中剛好有串流音樂的格式(感謝野生官網、Sound Cloud)。

這樣取得的線上音樂,就可以試著放入自己設計的播放器去執行(一開始用本機的流行樂> <)。

規劃

一開始只有做隨機一首歌去播放,後來發現真的很有趣,而且這些音樂挺好聽的,看著自己做的曲線配合著音樂跳動,就把整個音樂清單也做出來了。

請先選擇右方音樂,再點選播放 (範例請看 http://wcc723.github.io/d3js/2014/10/23/Ironman-30-days-24/)

很抱歉,目前本範例只支援Chrome

後記

這範例也拿去給朋友看,部分的人也說這好像沒什麼用(泣...),不過這就是創造的浪漫啊!


上一篇
像jQuery 一樣的D3.js,柯P野生官網API
下一篇
D3.js 也可以像音樂一樣動吃動吃動(2)
系列文
SVG 與 D3.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言